<template>
  <div class="user-manage">
    <Row class="margin-top-10">
      <p class="find" style="margin-bottom: 20px;">
        <b class="user-manage__title">意见反馈</b>
        <i-input class="user-manage__input" v-model="userid" placeholder="试试搜索用户ID" clearable></i-input>
        <i-input class="user-manage__input" v-model="username" placeholder="试试搜索用户名称" clearable></i-input>
        <i-input class="user-manage__input" v-model="mobile" placeholder="试试搜索手机号码" clearable></i-input>
        <i-input class="user-manage__input" v-model="desc" placeholder="试试搜索反馈内容" clearable></i-input>
        <Button type="primary" @click="findData">查询</Button>
      </p>
      <Table :columns="columns" :data="datas" :loading="loading" @on-sort-change="handleSort"></Table>
      <Page
        class="pager"
        v-if="total > 0"
        :total="total"
        show-total
        show-elevator
        show-sizer
        :page-size="limit"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
      />
    </Row>
  </div>
</template>

<script>
import http from '@/utils/http';
import moment from 'moment';
// NO-COMMON
import ImagePreview from '@/components/uploader/components/ImagePreview';
import TagEditor from '@/components/tag-editor';
// 模块名称
const NAME = '意见反馈';
const MODULE = 'feedback';

export default {
  name: MODULE,

  components: {
    [TagEditor.name]: TagEditor
  },

  data () {
    return {
      loading: true,
      username: '',
      userid: '',
      mobile: '',
      desc: '',
      sort: { sort_key: 'create_time', sort_direction: -1 },
      datas: [],
      total: 0,
      page: 1,
      limit: 10,
      columns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center'
        },
        {
          title: '头像',
          key: 'avatar',
          align: 'center',
          render: (h, params) => {
            return (
              <ImagePreview
                src={params.row.user.avatar}
                width="40px"
                height="40px"
                style={{
                  margin: '6px auto',
                  overflow: 'hidden',
                  'border-radius': '20px'
                }}
                has-remove={false}
              />
            );
          }
        },
        {
          title: '用户名',
          key: 'user.username',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.user.username);
          }
        },
        {
          title: '手机号码',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.user.mobile || '-');
          }
        },
        {
          title: '问题类型',
          align: 'center',
          key: 'type',
          sortable: 'custom'
        },
        {
          title: '反馈内容',
          align: 'center',
          key: 'desc',
          render: (h, params) => {
            return <span class="three-row-ellipsis">{params.row.desc}</span>;
          }
        },
        {
          title: '截图',
          align: 'center',
          key: 'desc',
          render: (h, params) => {
            const images = [];
            params.row.images.forEach(img => {
              images.push(
                <ImagePreview
                  src={img}
                  width="50px"
                  height="50px"
                  style={{
                    display: 'inline-block',
                    margin: '6px auto',
                    overflow: 'hidden',
                    'border-radius': '4px'
                  }}
                  has-remove={false}
                />
              );
            });
            return images;
          }
        },
        {
          title: '是否解决',
          align: 'center',
          key: 'solved',
          sortable: 'custom',
          render: (h, params) => {
            return (
              <i-switch
                size="small"
                value={params.row.solved}
                onOn-change={() => this.handleSolvedChange(params.row)}
              />
            );
          }
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'create_time',
          sortable: 'custom',
          render: (h, params) => {
            return (
              <span>
                {moment(params.row.create_time).format('YYYY/MM/DD HH:MM:SS')}
              </span>
            );
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          key: 'handle',
          render: (h, params) => {
            return (
              <div>
                <Button
                  type="primary"
                  size="small"
                  class="text-red"
                  onClick={() => this.handleUserDetail(params.row)}
                >
                  用户画像
                </Button>
                <Button
                  type="error"
                  size="small"
                  class="text-red"
                  onClick={() => this.handleDelete(params.row)}
                >
                  删除
                </Button>
              </div>
            );
          }
        }
      ]
    };
  },
  methods: {
    // 获取数据
    getData (init = true) {
      this.loading = true;
      http({
        method: 'GET',
        url: `/api/admin/${MODULE}`,
        params: {
          page: init ? 1 : this.page,
          limit: this.limit,
          name: this.username,
          userid: this.userid,
          mobile: this.mobile,
          desc: this.desc,
          sort_key: this.sort.sort_key,
          sort_direction: this.sort.sort_direction
        },
        operation: `获取${NAME}`
      }).then(res => {
        this.loading = false;
        if (res.data && res.ok) {
          this.datas = res.data.list.map((item, index) => {
            item.index = (this.page - 1) * this.limit + index + 1;
            return item;
          });
          this.total = res.data.total;
        }
      });
    },
    // 查找数据
    findData () {
      this.limit = 10;
      this.page = 1;
      this.total = 0;
      this.getData();
    },
    // 标记已解决
    handleSolvedChange (item) {
      http({
        method: 'PUT',
        url: `/api/admin/${MODULE}/${item._id}`,
        data: { solved: !item.solved },
        operation: `修改${NAME}状态`
      }).then(res => {
        if (res.data && res.ok) {
          // 更新datas
          this.$Message.success(`修改${NAME}状态成功`);
          this.getData();
        }
      });
    },
    // 前往用户画像
    handleUserDetail (item) {
      this.$router.push({
        path: `/user-manage/user-detail/${item.user._id}`
      });
    },
    // 处理排序
    handleSort ({ column, key, order }) {
      this.sort.sort_key = key;
      this.sort.sort_direction = order === 'asc' ? -1 : 1;
      this.getData();
    },
    // 删除数据
    handleDelete (item) {
      this.$Modal.confirm({
        title: '温馨提示',
        content: `确定要删除此${NAME}？`,
        onOk: () => {
          http({
            method: 'DELETE',
            url: `/api/admin/${MODULE}/${item._id}`,
            operation: `删除${NAME}`
          }).then(res => {
            if (res.data && res.ok) {
              // 更新datas
              this.showModal = false;
              this.$Message.success(`删除${NAME}成功`);
              this.getData();
            }
          });
        },
        onCancel: () => {}
      });
    },
    // 点击分页
    handlePageChange (val) {
      this.page = val;
      this.getData(false);
    },
    handlePageSizeChange (size) {
      this.limit = size;
      this.getData(false);
    }
  },
  created () {
    this.getData();
  }
};
</script>

<style lang="scss">
.user-manage {
  &__title {
    font-size: 16px;
  }

  &__input {
    display: inline-block;
    width: 200px;
    margin-left: 20px;
    margin-right: 20px;
  }

  &__input + &__input {
    margin-left: -10px;
  }

  .right {
    float: right;
  }
  .add-icon {
    float: right;
  }
  .overflow-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ivu-tooltip-inner {
    max-width: inherit;
  }
  .change-btn {
    margin-right: 15px;
  }
  .modal-container {
    width: 600px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -300px;
  }
  .pager {
    text-align: right;
    margin-top: 30px;
  }
  .book-img {
    width: 50px;
    height: 80px;
    float: left;
    margin-right: 10px;
  }
  .book-detail > p {
    text-align: left;
    padding-right: 10px;
  }
}

.common-dialog textarea.ivu-i-input {
  font-size: 12px !important;
}
</style>
